<template>
	<div class="order-item" :class="type === 'orderList' ? 'orderList' : 'orderDetail'"
        @click="clickItem">
		<img :src="item.goods_pic">
		<div class="order-info">
			<div class="clear box1">
				<div class="fl ellipsis2L">{{item.goods_name}}</div>
				<div class="fr">￥{{item.price}}</div>
			</div>
			<div class="clear box2">
				<div class="fl">{{item.description}}</div>
				<div class="fr">×{{item.goods_num}}</div>
			</div>
			<div class="conclu" v-if="type === 'orderList'">
				共{{order.goods_count}}件商品 合计{{order.sum_price}}元（包运费{{order.postage}}元）
			</div>
			<slot></slot>
		</div>
	</div>
</template>
<script>
export default{
    name:'OrderItem',
    methods:{
        clickItem() {
            // 虚拟订单
            if(this.order.is_virtual) return
            const path = this.type === 'orderList' ? `/order/detail/${this.order.order_id}` : `/goods/detail/${this.item.pre_goods_id}`
            this.$router.push(path)
        }
    },
	props: ['type','item','order']
}
</script>
<style lang='less' scoped>
	.order-item{
		width: 100%;
		height: 2.93rem;
		padding: .13rem;
		display: inline-block;
		&.orderDetail{
			background: #fff;
		}
		img{
			width: 2.93rem;
			height: 2.66rem;
			display: inline-block;
		}
		.order-info{
			vertical-align: top;
			display: inline-block;
			position: relative;
			width: 6.3rem;
			height: 2.66rem;
			margin-left: .26rem;
			.box1{
				font-size: .32rem;
				height: .96rem;
				.fl{
					width: 4.17rem;
				}
			}
			.box2{
				font-size: .32rem;
				color: #b5b5b5;
				height: .35rem;
				line-height: .35rem;
			}
			.conclu{
				width: 100%;
				text-align: center;
				position: absolute;
				bottom: 0;
				left: 0;
				font-size: .32rem;
			}
		}
	}
</style>
